<template>
  <div>
    <!--搜索表单和添加表单-->
    <div style="display: flex;margin-bottom: 10px">
      <div style="width: 250px">
        <el-button type="primary" style="margin-left: 5px" @click="add">添加新学生</el-button>
        <el-popconfirm title="你确定删除所选学生信息吗？" @confirm="deleteSelected">
          <el-button slot="reference" type="danger" style="margin-left: 5px">删除所选学生</el-button>
        </el-popconfirm>
      </div>
      <div style="flex: 1;text-align: right">
        <el-input v-model="params.sno" clearable placeholder="请输入学号"
                  style="width: 140px;margin-left: 5px"></el-input>
        <el-input v-model="params.sname" clearable placeholder="请输入姓名"
                  style="width: 140px;margin-left: 5px"></el-input>
        <el-input v-model="params.ssex" clearable placeholder="请输入性别"
                  style="width: 140px;margin-left: 5px"></el-input>
        <el-input v-model="params.sage" clearable placeholder="请输入年龄"
                  style="width: 140px;margin-left: 5px"></el-input>
        <el-input v-model="params.sdept" clearable placeholder="请输入系别"
                  style="width: 140px;margin-left: 5px"></el-input>
        <el-button class="el-icon-search" type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
        <el-button class="el-icon-refresh" type="primary" style="margin-left: 5px" @click="reset">重置</el-button>
      </div>
    </div>

    <!--主体-->
    <el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange"
              :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}" stripe>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="sno" label="学号"></el-table-column>
      <el-table-column prop="sname" label="姓名"></el-table-column>
      <el-table-column prop="ssex" label="性别"></el-table-column>
      <el-table-column prop="sage" label="年龄"></el-table-column>
      <el-table-column prop="sdept" label="系别"></el-table-column>
      <el-table-column prop="status" label="账号状态">
        <template v-slot="scope">
          <el-switch v-model="scope.row.status === '1' ? true : false"
                     @change="statusChange(scope.row.sno,scope.row.status)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <!--scope.row就是当前行数据-->
          <el-button type="primary" @click="edit(scope.row.sno)">编辑</el-button>
          <el-popconfirm title="你确定删除该学生信息吗？" @confirm="del(scope.row.sno)">
            <el-button slot="reference" type="danger" style="margin-left: 5px">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--新增弹出框-->
    <el-dialog title="新增学生信息" :visible.sync="dialogVisibleforadd" width="30%">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="学号" prop="sno">
          <el-input v-model="form.sno" clearable style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="sname">
          <el-input v-model="form.sname" clearable style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="ssex">
          <el-radio v-model="form.ssex" label="男"></el-radio>
          <el-radio v-model="form.ssex" label="女"></el-radio>
        </el-form-item>
        <el-form-item label="年龄" prop="sage">
          <el-input v-model="form.sage" clearable style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="系别" prop="sdept">
          <el-select v-model="form.sdept" placeholder="请选择系别">
            <el-option
                v-for="item in depts"
                :label="item.dname"
                :value="item.dname">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addSave">确 定</el-button>
      </span>
    </el-dialog>

    <!--编辑弹出框-->
    <el-dialog title="编辑学生信息" :visible.sync="dialogVisibleforedit" width="30%">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="学号" prop="sno">
          <el-input v-model="form.sno" clearable style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="sname">
          <el-input v-model="form.sname" clearable style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="ssex">
          <el-radio v-model="form.ssex" label="男"></el-radio>
          <el-radio v-model="form.ssex" label="女"></el-radio>
        </el-form-item>
        <el-form-item label="年龄" prop="sage">
          <el-input v-model="form.sage" clearable style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="系别" prop="sdept">
          <el-select v-model="form.sdept" placeholder="请选择系别">
            <el-option
                v-for="item in depts"
                :label="item.dname"
                :value="item.dname">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleforedit = false">取 消</el-button>
        <el-button type="primary" @click="editSave">确 定</el-button>
      </span>
    </el-dialog>

    <!--分页-->
    <div style="margin-top: 10px">
      <el-pagination
          background
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request1 from "@/utils/request1";

export default {
  name: "Student",
  data() {
    const checkAge = (rule, value, callback) => {
      if (!value) {
        callback(new Error('年龄不能为空'))
      }
      if (!/^[0-9]*$/.test(value)) {
        callback(new Error('请输入数字值'));
      }
      if (parseInt(value) < 21 || parseInt(value) > 24) {
        callback(new Error('年龄只能为21-24范围内'));
      }
      callback();
    };
    return {
      dialogVisibleforadd: false,
      dialogVisibleforedit: false,
      total: 0,
      oldSno: '',
      params: {
        pageNum: 1,
        pageSize: 10,
        sno: '',
        sname: '',
        ssex: '',
        sage: '',
        sdept: ''
      },
      form: {},
      tableData: [],
      depts: [],
      multipleSelection: [],
      rules: {
        sno: [
          {required: true, message: '请输入学号', trigger: 'blur'},
        ],
        sname: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
        ],
        ssex: [
          {required: true, message: '请选择性别', trigger: 'blur'},
        ],
        sage: [
          {validator: checkAge, trigger: 'blur'},
        ],
        sdept: [
          {required: true, message: '请选择院系', trigger: 'blur'},
        ],
      }
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request1.get('/student/page', {params: this.params}).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
      request1.get('/student/getAllDept').then(res => {
        this.depts = res.data
      })
    },
    reset() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
        sno: '',
        sname: '',
        ssex: '',
        sage: '',
        sdept: ''
      }
      this.load()
    },
    add() {
      this.dialogVisibleforadd = true
      if (this.$refs['ruleForm'] !== undefined) {
        this.$refs['ruleForm'].resetFields()
      }
      this.form = {}
    },
    addSave() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          request1.post('/student/save', this.form).then(res => {
            if (res.code === '200') {
              this.$notify.success("新增成功")
              this.dialogVisibleforadd = false
              this.load()
            } else {
              this.$notify.error('新增失败')
            }
          })
        } else {
          this.$notify.warning('请填写全部信息')
        }
      })
    },
    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum
      this.load()
    },
    del(sno) {
      request1.delete('/student/delete/' + sno).then(res => {
        if (res.code === '200') {
          this.$notify.success('删除成功')
          this.load()
        } else {
          this.$notify.error(res.msg)
        }
      })
    },
    edit(sno) {
      this.oldSno = sno
      this.dialogVisibleforedit = true
      if (this.$refs['ruleForm'] !== undefined) {
        this.$refs['ruleForm'].resetFields()
      }
      request1.get('/student/' + sno).then(res => {
        this.form = res.data
      })
    },
    editSave() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          request1.put('/student/update/' + this.oldSno, this.form).then(res => {
            if (res.code === '200') {
              this.$notify.success("编辑成功")
              this.dialogVisibleforedit = false
              this.load()
            } else {
              this.$notify.error('编辑失败')
            }
          })
        } else {
          this.$notify.warning('请填写全部信息')
        }
      })
    },
    cancel() {
      this.dialogVisibleforadd = false
      this.$refs['ruleForm'].resetFields()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteSelected() {
      if (this.multipleSelection.length === 0) {
        this.$notify.success('请勾选要删除的选项')
      } else {
        request1.post('/student/deleteSelected', this.multipleSelection).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功')
            this.load()
          } else {
            this.$notify.success('删除失败')
          }
        })
      }
    },
    statusChange(sno, status) {
      request1.get('/student/statusChange/' + sno).then(res => {
        if (status === '1') {
          this.$notify.success('账号已禁用')
        } else {
          this.$notify.success('账号已启用')
        }
        this.load()
      })
    }
  }
}
</script>

